<template>
  <div class="projects">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>Smart API Tester</h1>
          <el-menu mode="horizontal" :default-active="activeIndex" router>
            <el-menu-item index="/">首页</el-menu-item>
            <el-menu-item index="/projects">项目管理</el-menu-item>
            <el-menu-item index="/test-cases">测试用例</el-menu-item>
            <el-menu-item index="/reports">测试报告</el-menu-item>
          </el-menu>
        </div>
      </el-header>
      <el-main>
        <div class="page-header">
          <h2>项目管理</h2>
          <el-button type="primary" @click="showCreateDialog = true">
            <el-icon><plus /></el-icon>
            新建项目
          </el-button>
        </div>
        
        <el-table :data="projects" style="width: 100%">
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="description" label="描述" />
          <el-table-column prop="created_at" label="创建时间" />
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" @click="editProject(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteProject(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 创建/编辑项目对话框 -->
        <el-dialog
          v-model="showCreateDialog"
          :title="isEdit ? '编辑项目' : '新建项目'"
          width="500px"
        >
          <el-form :model="projectForm" label-width="80px">
            <el-form-item label="项目名称">
              <el-input v-model="projectForm.name" />
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="projectForm.description" type="textarea" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="showCreateDialog = false">取消</el-button>
              <el-button type="primary" @click="saveProject">确定</el-button>
            </span>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'Projects',
  components: {
    Plus
  },
  setup() {
    const activeIndex = ref('/projects')
    const showCreateDialog = ref(false)
    const isEdit = ref(false)
    const projects = ref([
      {
        id: 1,
        name: '示例项目',
        description: '这是一个示例项目',
        created_at: '2023-01-01'
      }
    ])
    
    const projectForm = reactive({
      id: null,
      name: '',
      description: ''
    })

    const editProject = (project) => {
      isEdit.value = true
      projectForm.id = project.id
      projectForm.name = project.name
      projectForm.description = project.description
      showCreateDialog.value = true
    }

    const deleteProject = (project) => {
      // 这里应该调用API删除项目
      console.log('删除项目:', project)
    }

    const saveProject = () => {
      if (isEdit.value) {
        // 编辑项目逻辑
        console.log('编辑项目:', projectForm)
      } else {
        // 创建项目逻辑
        console.log('创建项目:', projectForm)
      }
      
      // 重置表单
      projectForm.id = null
      projectForm.name = ''
      projectForm.description = ''
      showCreateDialog.value = false
      isEdit.value = false
    }

    return {
      activeIndex,
      showCreateDialog,
      isEdit,
      projects,
      projectForm,
      editProject,
      deleteProject,
      saveProject
    }
  }
}
</script>

<style scoped>
.projects {
  height: 100vh;
}

.el-header {
  background-color: #409EFF;
  color: white;
  padding: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
}

.el-menu {
  background-color: transparent;
  border-bottom: none;
}

.el-menu-item {
  color: white;
  border-bottom: 2px solid transparent;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.el-menu-item.is-active {
  border-bottom-color: white;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}
</style>